<template>
  <div class="permissions card">
    <div class="card table-main">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="label" label="名称" width="180" align="center"></el-table-column>
        <el-table-column prop="icon" label="图标" width="180" align="center">
          <template #default="scope">
            <component :is="scope.row.icon" style="width: 20px"></component>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.type === '0'" size="small">目录</el-tag>
            <el-tag v-else-if="scope.row.type === '1'" size="small" type="success">菜单</el-tag>
            <el-tag v-else-if="scope.row.type === '2'" size="small" type="info">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="菜单URL" align="center" />
        <el-table-column prop="name" label="路由地址" align="center" />
        <el-table-column prop="code" label="权限标识" align="center" />
        <!--        <el-table-column width="170" align="center" label="操作">-->
        <!--          <template #default="scope">-->
        <!--            <el-button type="primary" size="small" :icon="Edit" @click="editMenu(scope.row)">编辑</el-button>-->
        <!--            <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="permissions">
import { computed } from "vue";
import { useAuthStore } from "@/stores/modules/auth";
// import { Edit, Delete } from "@element-plus/icons-vue";

const authStore = useAuthStore();
const tableData = computed(() => {
  const arr = authStore.authMenuListGet;
  return arr.map(item => {
    return {
      label: item.meta.title,
      icon: item.meta.icon,
      type: "1",
      url: item.path,
      name: item.name,
      code: item.name
    };
  });
});

// function editMenu(row: Record<string, any>) {
//   console.log(row);
// }
//
// function handleDelete(row: Record<string, any>) {
//   console.log(row);
// }
</script>

<style scoped lang="scss">
@import "./index";
</style>
